<!-- 点前会 -->
<template>
  <div ref="tabPreMeeting" class="fixAll">
    <div class="box">
      <div class="seq">
        <div class="line1"></div>
        <div class="txt">点前会</div>
        <div class="line2"></div>
      </div>
      <div class="center">
        <div class="videoBox">
          <Title title="点前会视频" img-url="titleLogo1.png"></Title>
          <div class="videoFix">
            <video
              class="video"
              src="http://10.1.6.42:81/film/DpreAndConclude.mp4"
              muted
              autoplay
              controls
              loop
            ></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status1" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="banner">
          <!-- title -->
          <TitleAndLogo
            :show-two="true"
            title="人员考勤正常"
            img-url1="AI.png"
            img-url2="A-face.png"
            style="width: 223px"
          />
          <!-- 轮播 486-->
          <el-carousel :interval="5000" arrow="always" indicator-position="none">
            <el-carousel-item v-for="(item, index) in imgPeoples" :key="index">
              <div class="images">
                <div class="imgBox">
                  <img :src="urls.getAssetsFile(`${item.imgUrl}`)" alt="" />
                  <p class="name">{{ item.name }}</p>
                  <p class="bcgTitle">{{ item.bcgTitle }}</p>
                </div>
                <div class="certificate">
                  <img :src="urls.getAssetsFile(`${item.certificateImg}`)" alt="" />
                  <div class="certificateTxt">
                    <span>{{ item.certificateTxt }}</span>
                    <div class="success">
                      <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                      <p>正确</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
          <TitleAndLogo title="人员分工传达到位" img-url1="toTxt.png" style="width: 223px" />
        </div>
        <!-- table -->
        <div class="tableBox">
          <TitleAndLogo title="风险源与预控措施播报完整" img-url1="toTxt.png" style="width: 292px" />
          <el-table
            ref="table"
            class="hd-table"
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="safeAdvice" label="安全注意事项" width="272px" />
            <el-table-column prop="receiveStatus" label="接收状态" width="90px">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import urls from '@/utils/url'
// 视频
let statusArr = reactive({
  status1: ['考勤正确'],
})
//轮播 图片数组
let imgPeoples = reactive([
  {
    imgUrl: 'zhaoliu.png',
    name: '赵六',
    bcgTitle: '现场防护员',
    certificateTxt: '防护员证',
    certificateImg: 'zhaoliuCertificate.png',
  },
  {
    imgUrl: 'sunqi.png',
    name: '孙七',
    bcgTitle: '信号工',
    certificateTxt: '高处作业证',
    certificateImg: 'sunqiCertificate.png',
  },
])
const tableData = [
  {
    seq: '1',
    safeAdvice: '竖立或撤除信号机前,必须与车站值班人员联系同意,并办理登记手续后,按规定设置防护再进行施工',
  },
  {
    seq: '2',
    safeAdvice: '拉绳和叉杆必须绑扎牢固。严禁将叉杆、支杆支在身上,拉绳缠绕胳膊或腰间。立、撤机柱应用专用工具',
  },
  {
    seq: '3',
    safeAdvice: '在信号机上作业时,必须使用安全带,安全带使用前应进行检查。严禁两人在同一机柱上,一人在下,一人在上',
  },
  {
    seq: '4',
    safeAdvice: '雷雨或暴风、雨雪天气时严禁在信号机上作业.列车通过时.不得在该线路两侧信号机上作业,开关好机构门',
  },
]
const table = ref()
// 设置定时器
let timers
const scrollUp = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
  })
  timers = setInterval(() => {
    // if (tableScroll.value) {
    demo.scrollTop += 1
    if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight - 5) {
      demo.scrollTop = 0
    }
    // }
  }, 60)
}
let tabPreMeeting = ref()
onMounted(() => {
  nextTick(() => {
    scrollUp(table.value)
  })
})

onBeforeUnmount(() => {
  clearInterval(timers) // 销毁定时器
})
defineExpose({})
</script>

<style lang="scss" scoped>
@import '@/styles/centerStyle.scss';
.box {
  display: flex;
  margin-top: 20px;
  .seq {
    margin-left: 24px;
    margin-right: 42px;
    .txt {
      width: 54px;
      height: 26px;
      font-size: 18px;
      font-family:
        Source Han Sans CN-Bold,
        Source Han Sans CN;
      font-weight: 700;
      color: #111111;
      line-height: 26px;
      margin: 17px 0;
    }
    .line1 {
      margin: auto;
      height: 148px;
      width: 2px;
      background: #1d6be1;
    }
    .line2 {
      margin: auto;
      height: 175px;
      width: 2px;
      background: #1d6be1;
    }
  }
  .center {
    display: flex;
    width: calc(100% - 120px);
    .videoBox {
      width: 33.4%;
    }
    .videoFix {
      width: 100%;
      position: relative;
      margin-top: 20px;
      .video {
        object-fit: cover;
        width: 100%;
        height: 279px;
      }
    }
    .fixStatus {
      display: flex;
      align-items: center;
      position: absolute;
      top: 6px;
      right: 6px;
      .oneStatus {
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .banner {
      margin-left: 3%;
      // width:36.2%;
      width: 47%;
      margin-left: 3%;
      margin-right: 26px;
      .title {
        display: flex;
      }
      :deep(.el-carousel__container) {
        // width: 536px;
        height: 230px;
        margin-bottom: 16px;
      }
      .images {
        display: flex;
        // width: 87.69%;
        width: 86.69%;
        margin: auto;
        .imgBox {
          margin-right: 3%;
          width: 33%;
          text-align: center;
          box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
          background: url('@/assets/xinshuoImages/bannerBcg.png') no-repeat center/130% 280px;
          &:last-child {
            margin-right: 0;
          }
          > img {
            // margin: 0 4px;
            width: 94.6%;
            height: 141px;
          }
          .name {
            margin: 8px 0;
          }
          .bcgTitle {
            font-size: 18px;
            font-family:
              Source Han Sans CN-Medium,
              Source Han Sans CN;
            font-weight: 500;
            color: #1d6be1;
            line-height: 33px;
            // margin: auto;
            // width: 142px;
            height: 33px;
            background: rgba(29, 107, 225, 0.1);
            border-radius: 0px 0px 0px 0px;
          }
        }
        .certificate {
          text-align: center;
          flex: 1;
          box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
          background: #f5f9ff;
          .certificateTxt {
            margin: 15px 30px;
            justify-content: space-between;
            display: flex;
            align-items: center;
          }
        }
      }
      :deep(.el-carousel__arrow i) {
        width: 0;
        height: 0;
      }
      :deep(.el-carousel__arrow--left) {
        border-radius: 0;
        width: 25px;
        height: 44px;
        background: url('@/assets/xinshuoImages/leftArrow.png') no-repeat center/100% 100%;
        left: 2px !important;
      }
      :deep(.el-carousel__arrow--right) {
        border-radius: 0;
        width: 25px;
        height: 44px;
        background: url('@/assets/xinshuoImages/rightArrow.png') no-repeat center/100% 100%;
        right: 2px !important;
      }
    }
  }
}
.tableBox {
  width: 33%;
}
:deep(.el-table) {
  font-size: 16px !important;
}
.table-container {
  height: 400px;
  overflow-y: auto;
}
.hd-table {
  text-align: center;
  height: 279px;
}
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  text-align: center;
}
.fixAll {
  overflow-y: auto;
  overflow-x: hidden;
  // height: 480px;
}
</style>
